@import './base.less';
@import './frame.less';
@import './keyframes.less';
@import './animate.less';
.start {
  position: absolute;
  z-index: 9;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  .logo {
    width: 550px;
    &.rotate {
      animation: rotate 1s 1;
    }
  }
  .name {
    font-size: 60px;
    color: #fff;
    width: 100%;
    text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
  }
}

.nav_container {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  .nav_item {
    .am_nav();
    &.disabled {
      background-color: rgb(152, 153, 154);
      &::before {
        border-left: 30px solid rgb(152, 153, 154);
      }
    }
    &::before {
      position: absolute;
      bottom: -27px;
      content: "";
      width: 0;
      height: 0;
      border-top: 30px solid transparent;
      border-left: 30px solid #406ee8;
      transform: rotateZ(92deg);
    }
    padding: 5px 15px;
    border-radius: 10px;
    position: absolute;
    background-color: #406ee8;
    box-shadow: 3px 3px 1px 1px rgba(0, 0, 0, 0.3);
    font-size: 28px;
    .nav_item_link {
      color: #fff;
    }
    img {
      width: 40px;
      vertical-align: middle;
    }
    &.fund {
      left: 70px;
      top: 250px;
    }
    &.read {
      left: 300px;
      bottom: 185px;
    }
    &.home {
      left: 100px;
      bottom: 335px;
    }
    &.life {
      left: 70px;
      top: 470px;
    }
    &.fx {
      right: 130px;
      top: 90px;
    }
    &.build {
      right: 170px;
      top: 280px;
    }
    &.handle {
      right: 60px;
      bottom: 400px;
    }
    &.fx_live {
      right: 60px;
      bottom: 240px;
    }
  }
}

.am_item {
  z-index: 2;
  position: absolute;
  &.lights {
    position: absolute;
    top: 51%;
    left: 33%;
    z-index: 5;
    width: 85px;
  }
  &.cloud {
    &.cloud1 {
      width: 80px;
      top: 1%;
      right: -20%;
      animation: cloud 8s 2s linear infinite;
    }
    &.cloud2 {
      width: 100px;
      top: 2%;
      right: -20%;
      animation: cloud 8s 4s linear infinite;
    }
    &.cloud3 {
      width: 110px;
      top: 3%;
      right: -20%;
      animation: cloud 8s 0s linear infinite;
      z-index: 5;
    }
  }
  &.plant {
    width: 130px;
    left: -20%;
    bottom: -20%;
    z-index: 10;
    animation: plant 10s linear infinite;
  }
  &.car_1 {
    width: 90px;
    animation: car_1 10s linear infinite;
  }
  &.car_2 {
    width: 90px;
    animation: car_2 10s linear infinite;
  }
  &.people_1 {
    width: 35px;
    animation: people_1 8s 0s linear infinite;
  }
  &.people_2 {
    width: 38px;
    animation: people_2 8s 2s linear infinite;
  }
  &.people_3 {
    width: 45px;
    animation: people_3 8s 1s linear infinite;
  }
}